<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<title>多媒体与嵌入</title>

		<style>
			.float {
				margin: 10px 10px 0 0;
				float: left;
				border: 1px solid #ff4bba;
			}
		</style>
	</head>
	<body>
		<div class="float">
			<h5>定义简单图片 - img</h5>
			<!--定义图片
				src：定义图片源
				alt：定义图像的备用文本描述
				crossorigin：
					anonymous：跨域但没有发送证书
					use-credentials：跨域且发送证书
				decoding：
					sync：同步解码
					async：异步解码
					auto：默认值，不指定解码方式，由浏览器决定哪一种对用户来说是最合适的
				sizes：表示资源大小的、以逗号隔开的一个或多个字符串，包括媒体条件和资源尺寸。如：(max-height: 500px) 1000px
				srcset：以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像，包括指向图像的URL和大小描述符（可选）。如： img-200px.png 200w, img-400px.png 400w, img-800px.jpg 800w
				usemap：与元素相关联的 image map 的部分 URL
				title：定义图片标题
			-->
			<img src="assets/img/img.jpg" alt="image-alt" title="img-title">
		</div>

		<div class="float">
			<h5>定义有注解的图片 - figure+figcaption</h5>
			<!-- 该标签可用来定义带说明的区块，不仅仅是图片才能使用 -->
			<figure>
				<img src="assets/img/img.jpg" alt="">
				<figcaption>我是图片说明</figcaption>
			</figure>
		</div>

		<div class="float">
			<h5>定义多引用源的图片 - picture</h5>
			<picture>
				<source srcset="img-240-200.jpg" media="(min-width: 400px)">
				<source srcset="img-560-300.jpg" media="(min-width: 800px)">
				<img src="img-default.jpg" alt="" />
			</picture>
		</div>

		<div class="float">
			<h5>矢量图片 - svg</h5>
			<!-- SVG 图像是使用各种元素创建的，这些元素分别应用于矢量图像的结构、绘制与布局，这里就不便列出，因为实在太多（可能有近百种，详见 MDN） -->
			<svg>
				<rect width="100%" height="100%" fill="red" />
				<circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" />
				<polygon points="120,0 240,225 0,225" fill="green" />
				<text x="50" y="100" font-family="Verdana" font-size="65" fill="white" stroke="black" stroke-width="2">
					Hello!
				</text>
			</svg>
		</div>

		<div class="float">
			<h5>定义画布 - canvas</h5>
			<!-- 定义图形，比如图表和其他图像，该标签只是图形容器，必须使用脚本来绘制图形 -->
			<canvas></canvas>
		</div>

		<div class="float">
			<h5>定义嵌入的内容 - embed</h5>
			<!--定义嵌入的内容（大多数浏览器已弃用）
				src：引用源
				type：指定嵌入内容的 MIME 类型
			-->
			<embed src="" type="" />
		</div>

		<div class="float">
			<h5>音频 - audio</h5>
			<!--
				autoplay: 就绪后马上播放
				loop: 循环播放
				controls: 向用户显示播放控件
				muted: 是否静音
				preload：
					none：示意用户可能不会播放该音频。换句话说，该音频不会被缓存
					metadata：示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的
					auto: 示意用户可能会播放音频。换句话说，如果有必要，整个音频都将被加载，即使用户不期望使用
			-->
			<audio src="assets/audio/audio.mp3" autoplay loop controls>抱歉，您的浏览器不支持音频直接播放，请使用最新版浏览器</audio>
		</div>

		<div class="float">
			<h5>视频 - video</h5>
			<!--
				playsinline：一个布尔属性，标志视频将被“inline”播放，即在元素的播放区域内。请注意，没有此属性并不意味着视频始终是全屏播放的。
				poster：一个海报帧的URL，用于在用户播放或者跳帧之前展示
			-->
			<video src="assets/video/video.webm" poster="" autoplay loop controls muted>
				抱歉，您的浏览器不支持视频直接播放，请使用最新版浏览器，或者点击这里下载视频：
				<a href="assets/video/video.webm">Download</a>
			</video>
		</div>

		<div class="float">
			<h5>文本轨道 - track</h5>
			<!--规定外部文本轨道（如字幕）- 可当作媒体元素<audio> 和 <video>的子元素来使用
				kind: 规定文本轨道的类型
					captions-显示的简短说明（如：翻译、附加的背景信息...）
					chapters-定义章节标题，用于导航媒介资源
					descriptions-定义描述，用于通过音频描述媒介的内容，假如内容不可播放或不可见
					metadata-定义该track是脚本使用的track，对用户不可见
					subtitles-定义字幕，用于在视频中显示字幕 
				label: 规定文本轨道的标标题 
				srclang: 定义字幕的文本数据的语言。如果 kind 属性的值是 "subtitles"，则 srclang 属性是必需的
				default: 表明该 track 是默认轨道
			-->
			<video src="" poster="assets/img/img.jpg" controls>
				<track default kind="captions" srclang="en" src="media.vtt" />
				抱歉，您的浏览器不支持视频直接播放，请使用最新版浏览器
			</video>
		</div>

		<div class="float">
			<h5>定义多媒体资源 - source</h5>
			<!--定义多媒体资源 - 可为 <picture>, <audio> 或者 <video> 元素指定多个媒体资源
				src：<audio>、<video> 元素使用的资源地址
				srcset：<picture> 元素使用的资源地址，该属性只有在<source>元素是<picture>元素的直接子元素时才会产生作用
				type：规定嵌入内容的 MIME 类型。如果用户代理不支持指定的类型，那么这个 <source> 元素会被跳过
				media：提供一个用于给用户代理作为选择 <source> 元素的依据的媒体条件(media condition)（类似于媒体查询）。如果这个媒体条件匹配结果为 false，那么这个 <source> 元素会被跳过
			-->
			<audio>
				<source src="myAudio.mp3" type="audio/mpeg">
				<source src="myAudio.ogg" type="audio/ogg">
				<p>Your browser doesn't support HTML5 audio. Here is a <a href="myAudio.mp4">link</a> to the audio
					instead.</p>
			</audio>
		</div>

		<div class="float">
			<h5>嵌入HTML文档 - iframe</h5>
			<!--HTML文档引用
				allow：用于为<iframe>指定其特征策略
				name：用于定位嵌入的浏览上下文的名称。该名称可以用作 <a> 标签与 <form> 标签的 target 属性值，也可以用作 <input> 标签和 <button> 标签的 formtarget 属性值，还可以用作 window.open() 方法的 windowName 参数值
				sandbox：该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件
				scrolling：控制是否要在框架内显示滚动条（H5已弃用）
			-->
			<iframe title="" src="assets/include/include.html"></iframe>
		</div>
	</body>
</html>
